{% extends 'base.html' %}
{% load static %}
{% block list_css %}
	<link rel="stylesheet" type="text/css" href="{% static "css/list01.css" %}"/>
{% endblock list_css %}


{% block content %}
	<main>
		<ul class="classify-bar1">
            {% for kind in kinds %}
            <li><a href="/list/kind{{ kind.id }}">{{ kind.kind_name }}</a></li>

            {% endfor %}
		</ul>
        <div id="" class="clearfix lists">
            <ul class="classify-list active clearfix">
                {% for book in page.object_list %}
				<li>
					<a href="/single/{{ book.id }}"><img src="{{ book.book_img }}" alt=""></a>
					<a href="/single/{{ book.id }}"><h5>{{ book.book_name }}</h5></a>
					<a href="/single/{{ book.id }}" class="btn btn-danger" role="button">开始阅读</a>
					<span style="font-size: 4px; display: inline-block; float: left; margin-left: 5px">阅读量:{{ book.popularity }}
						<br>
						<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
						<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
						<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
						<span class="glyphicon glyphicon-star" style="font-size: 9px; color: gold;"></span>
					</span>
				</li>
				{% endfor %}
            </ul>
			<nav aria-label="Page navigation">
				<ul class="pagination">
						{% if page.has_previous %}
						<li><a href="/list/kind{{ comickind_id }}/{{ page.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
						{% else %}
						<li><a href="" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
						{% endif %}

						{% for pnum in page.paginator.page_range %}
						<li><a href="/list/kind{{ comickind_id }}/{{ pnum }}">{{ pnum }}</a></li>
						{% endfor %}

						{% if page.has_next %}
						<li><a href="/list/kind{{ comickind_id }}/{{ page.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
						{% else %}
						<li><a href="" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
						{% endif %}
				</ul>
    		</nav>
{#            <ul class="classify-list clearfix" style="background: rosybrown;">#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#                <li><a href=""><img src="" alt="" /></a></li>#}
{#            </ul>#}
        </div>
	</main>
{% endblock %}